<template>
  <el-card>
    <template #header>
      <!-- <span>患者打卡率</span> -->
      <div class="card-header">
        <span>患者打卡率</span>
        <div class="right">
          <XmDatePicker
            type="daterange"
            v-model="timeRang"
            disabledDateT="after"
            label="选择开始时间:"
            prop="fillingTime"
          ></XmDatePicker>
          <el-button type="primary">确定</el-button>
        </div>
      </div>
    </template>
    <div class="hospital-summary">
      <summaryItem
        v-for="(item, key) in summaryList"
        :item="item"
        @click="select(item)"
        style="width: 20%; height: 100px"
        :key="key"
      ></summaryItem>
    </div>
  </el-card>
</template>
<script lang="ts" setup>
  // 概要
  import summaryItem from '../summaryItem/index.vue'
  import XmDatePicker from '@/components/XMC/XmDatePicker/index.vue'
  import { ref } from 'vue'
  import type { SummaryList, SummaryModel } from '../../types'
  const props = defineProps({
    summaryList: {
      // eslint-disable-next-line no-undef
      type: Array as PropType<SummaryList>,
      default() {
        return null
      },
    },
  })
  const item = props.summaryList[0]
  // const summaryList: summaryModel[] = [
  //   { title: '累计首诊病历总数', content: '' },
  //   { title: '累计复诊病历总数', content: '' },
  //   { title: '累计病历总数', content: '' },
  //   { title: '累计提交病历数', content: '' },
  //   { title: '累计未提交病历数', content: '' },
  //   { title: '累计管理患者', content: '' },
  //   { title: '累计已提交行动计划制定总数', content: '' },
  //   { title: '累计停药人数', content: '' },
  // ]
  function select(item: SummaryModel) {
    console.log('点击了事件 =' + JSON.stringify(item))
  }

  const timeRang = ref(null)
</script>
<style lang="scss" scoped>
  .hospital-summary {
    display: flex;
    flex-wrap: wrap;
    padding: 25px 50px;
    // border: rgba(233, 233, 233, 1) 1px solid;
    border-top: none;
    margin-bottom: 22px;
    background-color: white;
  }
  .card-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 22px;
    padding-right: 22px;
    .right {
      display: flex;
      // justify-items: center;
    }
  }
  // .box-card {
  //   width: 50%;
  // }
</style>
